import { useState, useEffect } from 'react';
import {
  Table,
  Button,
  Input,
  Form,
  Divider,
  Drawer,
  Select,
  message,
  Modal,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
  SearchOutlined,
  DoubleRightOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import { Breadcrumb, DrawerProps } from 'antd';
import './index.scss';
import { getAccount, add, edit, del } from '../../../../apis/account/studentA';

const StudentAccount: React.FC = () => {
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(5);
  const [total, setTotal] = useState(0);
  const [search, setSearch] = useState('');
  const [data, setData] = useState<DataType[]>([]);
  const [editData, setEditData] = useState<DataType[]>([]);
  const [delId, setDelId] = useState<React.Key[]>([]);

  const [addOpen, setAddOpen] = useState(false);
  const [delOpen, setDelOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [editForm] = Form.useForm();
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps['placement']>('top');

  interface DataType {
    key: React.Key;
    name: string;
    accountType: string;
    accountName: string;
    accountId: string;
    bank: string;
    tel: string;
    status: number;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '学生姓名',
      dataIndex: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '账户类型',
      dataIndex: 'accountType',
    },
    {
      title: '账户户主',
      dataIndex: 'accountName',
    },
    {
      title: '账号编码',
      dataIndex: 'accountId',
    },
    {
      title: '开户行',
      dataIndex: 'bank',
    },
    {
      title: '手机号',
      dataIndex: 'tel',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (_, record) => <>{record.status === 0 ? '启用' : '停用'}</>,
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows
      );
      setDelId(selectedRowKeys);
      setEditData(selectedRows);
    },
  };

  //渲染
  const getData = () => {
    getAccount({ page: page, count: count, search: search }).then(
      (res: any) => {
        if (res.code === 200) {
          setTotal(res.total);
          let _data = res.data.map((v: any) => {
            return { ...v, key: v.id };
          });
          setData(_data);
        } else {
          message.error('加载失败');
        }
      }
    );
  };
  //初始化
  useEffect(() => {
    getData();
  }, [page, count, search, total]);
  const onChangeFn = (page: number, pageSize: number) => {
    setPage(page);
    setCount(pageSize);
  };
  /* 分页 */
  const pagination = {
    defaultPageSize: 5,
    defaultCurrent: 1,
    total: total,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
    onChange: onChangeFn,
  };

  /* 新增 */
  const onAdd = (value: any) => {
    if (value.status === '0') {
      value.status = 0;
    } else {
      value.status = 1;
    }
    add(value).then((res: any) => {
      if (res.code === 200) {
        getData();
        message.success('新增成功');
        setAddOpen(false);
      } else {
        message.error('新增失败');
      }
    });
  };
  /* 修改 */
  const showModal = () => {
    if (editData.length === 0) return;
    setEditOpen(true);
    let data = {
      id: editData[0].key,
      name: editData[0].name,
      tel: editData[0].tel,
      bank: editData[0].bank,
      accountId: editData[0].accountId,
      accountName: editData[0].accountName,
      accountType: editData[0].accountType,
      status: editData[0].status === 0 ? '启用' : '停用',
    };
    editForm.setFieldsValue(data);
  };
  const onEdit = (value: any) => {
    value.id = editData[0].key;
    switch (value.status) {
      case '启用':
        value.status = 0;
        break;
      case '停用':
        value.status = 1;
        break;
      case 0:
        value.status = 0;
        break;
      case 1:
        value.status = 1;
        break;
    }
    edit(value).then((res: any) => {
      if (res.code === 200) {
        message.success('编辑成功');
        getData();
        setEditOpen(false);
      } else {
        message.error('编辑失败');
      }
    });
  };
  /* 删除 */
  const onDel = () => {
    del({ id: delId[0] }).then((res: any) => {
      if (res.code === 200) {
        message.success('删除成功');
        getData();
        setDelOpen(false);
      } else {
        message.error('删除失败');
      }
    });
  };
  /* 搜索 */
  const onSearch = (value: any) => {
    setSearch(value.search);
  };
  /* 重置 */
  const reset = () => {
    setSearch('');
    form.resetFields();
  };
  /* 抽屉 */
  const showDrawer = () => {
    setOpen(true);
  };
  /* 高级筛选 */
  const onClose = () => {};
  const onFinish = () => {};

  return (
    <div className="schoolAccount">
      <div className="title">
        <Breadcrumb separator=">">
          <Breadcrumb.Item>账户管理</Breadcrumb.Item>
          <Breadcrumb.Item href="">学生账户</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div>
        <Form
          className="search-box"
          form={form}
          name="control-hooks"
          layout="inline"
          onFinish={onSearch}
        >
          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e' }}
              onClick={() => {
                setAddOpen(true);
              }}
            >
              新增
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e' }}
              onClick={showModal}
            >
              修改
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e' }}
              onClick={() => {
                setDelOpen(true);
              }}
            >
              删除
            </Button>
          </Form.Item>
          <Form.Item name="search">
            <Input placeholder="请输入关键字搜索" />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e' }}
              htmlType="submit"
            >
              <SearchOutlined />
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e' }}
              onClick={reset}
            >
              重置
            </Button>
          </Form.Item>
          <Divider type="vertical" className="est" />
          <Button type="link" onClick={showDrawer}>
            高级筛选
            <DoubleRightOutlined rotate={90} style={{ color: '#d4d2d2' }} />
          </Button>
        </Form>
      </div>

      {/* 高級篩選 */}
      <div className="site-drawer-render-in-current-wrapper">
        <Drawer
          placement={placement}
          closable={false}
          onClose={onClose}
          open={open}
          key={placement}
          getContainer={false}
          bodyStyle={{ width: '1200px' }}
          height={150}
        >
          <Form className="account" layout="inline" onFinish={onFinish}>
            <Form.Item label="账户类型" name="role">
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="银行卡">银行卡</Select.Option>
                <Select.Option value="支付宝">支付宝</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="账户名称" name="roleName">
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="状态" name="status">
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="2">停用</Select.Option>
              </Select>
            </Form.Item>

            <div
              className="accountClose"
              onClick={() => {
                setOpen(false);
              }}
            >
              <CloseOutlined />
            </div>
            <div className="accountBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: '#69657e' }}
                  icon={<SearchOutlined />}
                  htmlType="submit"
                >
                  查询
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: '#69657e' }}
                  htmlType="submit"
                >
                  重置
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      <Table
        bordered={true}
        rowSelection={{
          type: 'radio',
          ...rowSelection,
        }}
        pagination={pagination}
        columns={columns}
        dataSource={data}
      />

      <Modal
        title="学校账户   新增"
        centered
        open={addOpen}
        onCancel={() => setAddOpen(false)}
        destroyOnClose={true}
        footer={null}
      >
        <Form
          name="addData"
          onFinish={onAdd}
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="学生姓名"
            name="name"
            style={{ marginTop: '20px' }}
            rules={[
              {
                required: true,
                message: '必须添加姓名',
              },
            ]}
          >
            <Input placeholder="请输入学生姓名" />
          </Form.Item>
          <Form.Item
            label="账户类型"
            name="accountType"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择">
              <Select.Option value="借记卡">借记卡</Select.Option>
              <Select.Option value="信用卡">信用卡</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="账户户主"
            name="accountName"
            rules={[
              {
                required: true,
                message: '必须添加名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="账号编码" name="accountId">
            <Input placeholder="请输入账号" />
          </Form.Item>
          <Form.Item label="状态" name="status" rules={[{ required: true }]}>
            <Select placeholder="请选择">
              <Select.Option value="0">启用</Select.Option>
              <Select.Option value="1">停用</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="开户行"
            name="bank"
            rules={[
              {
                required: true,
                message: '必须添加名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="tel"
            rules={[
              {
                required: true,
                message: '必须添加名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e', marginLeft: '160px' }}
              htmlType="submit"
            >
              添加
            </Button>
            <Button
              type="primary"
              style={{ background: '#69657e', marginLeft: '20px' }}
              onClick={() => {
                setAddOpen(false);
              }}
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="学校账户   编辑"
        centered
        open={editOpen}
        onCancel={() => setEditOpen(false)}
        destroyOnClose={true}
        footer={null}
        forceRender
      >
        <Form
          form={editForm}
          name="editData"
          onFinish={onEdit}
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="学生姓名"
            name="name"
            style={{ marginTop: '20px' }}
            rules={[
              {
                required: true,
                message: '必须添加姓名',
              },
            ]}
          >
            <Input placeholder="请输入学生姓名" disabled />
          </Form.Item>
          <Form.Item
            label="账户类型"
            name="accountType"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择" disabled>
              <Select.Option value="借记卡">借记卡</Select.Option>
              <Select.Option value="信用卡">信用卡</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="账户户主"
            name="accountName"
            rules={[
              {
                required: true,
                message: '必须添加名称',
              },
            ]}
          >
            <Input placeholder="请输入" disabled />
          </Form.Item>
          <Form.Item label="账号编码" name="accountId">
            <Input placeholder="请输入账号" disabled />
          </Form.Item>
          <Form.Item label="状态" name="status" rules={[{ required: true }]}>
            <Select placeholder="请选择">
              <Select.Option value="0">启用</Select.Option>
              <Select.Option value="1">停用</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="开户行"
            name="bank"
            rules={[
              {
                required: true,
                message: '必须添加名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="tel"
            rules={[
              {
                required: true,
                message: '必须添加名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: '#69657e', marginLeft: '160px' }}
              htmlType="submit"
            >
              编辑
            </Button>
            <Button
              type="primary"
              style={{ background: '#69657e', marginLeft: '20px' }}
              onClick={() => {
                setEditOpen(false);
              }}
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      {/* 删除 */}
      <Modal
        title="提示"
        open={delOpen}
        onOk={onDel}
        onCancel={() => {
          setDelOpen(false);
        }}
      >
        <p>确定要删除选中学生账号吗？</p>
      </Modal>
    </div>
  );
};
export default StudentAccount;
